<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/OutletManagementTemplate.xhtml">

    <ui:define name="contentInsert">

        <p:tabView activeIndex="#{timeslotMgmtBean.tabIdx}">
            <c:forEach var="anArea" items="#{areaMgmtBean.allAreas}" varStatus="i">
                <br/>
                <br/>
                <p:tab title="#{anArea}" >
                    <h:form>
                        <p:dataTable var="timeSlot" value="#{timeslotMgmtBean.getTimeslots(anArea.getId())}" id="timeSlotList"
                                     rowEditListener="#{timeslotMgmtBean.onEditRow}">
                            <f:facet name="header" >
                                <h:outputText value="#{anArea}"/>
                            </f:facet>
                            <p:column headerText="Time" sortBy="#{timeSlot.timeStr}">
                                <h:outputText value="#{timeSlot.timeStr}"/>
                            </p:column>
                            <p:column headerText="Mon">
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{timeSlot.quotaMon}">
                                        </h:outputText>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputText style="width:90%" value="#{timeSlot.quotaMon}"/>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Tue">
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{timeSlot.quotaTue}">
                                        </h:outputText>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputText style="width:90%" value="#{timeSlot.quotaTue}"/>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Wed">
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{timeSlot.quotaWed}">
                                        </h:outputText>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputText style="width:90%" value="#{timeSlot.quotaWed}"/>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Thur">
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{timeSlot.quotaThu}">
                                        </h:outputText>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputText style="width:90%" value="#{timeSlot.quotaThu}"/>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Fri">
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{timeSlot.quotaFri}">
                                        </h:outputText>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputText style="width:90%" value="#{timeSlot.quotaFri}"/>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Sat">
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{timeSlot.quotaSat}">
                                        </h:outputText>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputText style="width:90%" value="#{timeSlot.quotaSat}"/>
                                    </f:facet>
                                </p:cellEditor>
                            </p:column>
                            <p:column headerText="Sun" >
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{timeSlot.quotaSun}">
                                        </h:outputText>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputText style="width:90%" value="#{timeSlot.quotaSun}"/>
                                    </f:facet>
                                </p:cellEditor> 
                            </p:column>
                            <p:column headerText="Edit" style="width:5px">
                                <p:rowEditor />
                            </p:column>

                            <p:column headerText="Delete" style="width:8px">
                                <p:commandButton id ="button" ajax="false"
                                                 image="ui-icon ui-icon-trash"
                                                 actionListener="#{timeslotMgmtBean.removeTimeslot}" 
                                                 update="timeSlotTableForm" >
                                    <f:attribute name="time" value="#{timeSlot.tsTime}" />
                                </p:commandButton>
                            </p:column>
                        </p:dataTable>  
                        <br/>

                        <p:commandButton id="newTimeslot" value="Add new timeslot" oncomplete="addDialog.show()">
                            <f:setPropertyActionListener target="#{timeslotMgmtBean.tabIdx}"
                                                         value="${i.index}"/>
                        </p:commandButton>
                    </h:form>
                </p:tab>
            </c:forEach>
        </p:tabView>


        <p:dialog id="addDialog" header="Add new timeslot" widgetVar="addDialog"
                  width="550" height="300" >  
            <h:form>  
                <h:outputLabel value="Add new timeslot for areaId: #{timeslotMgmtBean.areaId}"/>
                <h:panelGrid columns="2" border="1">
                    <h:outputLabel value="Select hour:"/>
                    <h:outputLabel value="Select minute:"/>
                    <h:selectOneMenu value="#{timeslotMgmtBean.hour}">
                        <f:selectItems value="#{timeslotMgmtBean.allHours}"  
                                       var="hour"
                                       itemValue="#{hour}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu value="#{timeslotMgmtBean.minute}">
                        <f:selectItems value="#{timeslotMgmtBean.allMinutes}"  
                                       var="minute"
                                       itemValue="#{minute}"/>  
                    </h:selectOneMenu>
                </h:panelGrid>
                <p:commandButton id="submitNewTimeslot" value="Add new" update="display"  
                                 actionListener="#{timeslotMgmtBean.addTimeslot}" ajax="false"
                                 oncomplete="addDialog.close()"/>

            </h:form>  
        </p:dialog>
    </ui:define>
</ui:composition>
